<template>
    <!-- 用来封装单个图片底部文字形式 -->
    <div class="element element--article" v-for="(item, index) in props.botfullData" :key='item.uuid'>
        <figure class="article__figure">
            <router-link class="figure__image disableShadowBox"
                :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
                <img v-if="item.imgUrl !== ''" src="https://images.barrons.com/im-63581282" alt="">
                <img class="lazyautosizes lazyloaded" alt="Read full" data-srcset="item.imgUrl" sizes="300px"
                    :srcset="item.imgUrl">
            </router-link>
        </figure>
        <div class="article__content">
            <div class="content--primary">
                <h3 class="article__headline">
                    <router-link class="link"
                        :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
                        <span class="label--opinion" v-if='index === 1'>Opinion: </span>
                        {{ item.title }}
                    </router-link>
                </h3>
            </div>
            <div class="content--secondary" v-if="item.secondary.length > 0">
                <ul class="list list--bullets">
                    <li class="bullet__item" v-for="item1 in item.secondary" :key='item1.uuid'>
                        <router-link class="link"
                            :to="{ name: 'NewDetail', params: { uuid: item1.uuid, author: item1.author } }">
                            {{ item1.title }}
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps(['botfullData']);
</script>
<style scoped lang='scss'>
.head {
    background: $tColor;
    height: 88px;
    width: 100%;
    margin-bottom: 0;
}

.article__content {
    // padding: 10px;
}

.content--primary {
    position: relative;
    top: 0;
    z-index: 2;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: block;
    padding: 10px;
    background: #fff;
    transition: top .3s ease-in-out;
}
</style>